<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
			#chartdiv {
				width		: 110%;
				height		: 180px;
				font-size	: 10px;
			}
			</style>

	<!-- Resources -->
	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/amcharts.js"></script>
	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/serial.js"></script>
	<script src="http://60.173.247.7:9009/RiverSystem/jslib/amcharts-3.14.5/light.js"></script>

	<!-- Chart code -->
	<script>
			var chart = AmCharts.makeChart("chartdiv", {
			    "type": "serial",
			    "theme": "light",
			    "dataProvider": [{
			        "lineColor": "#b7e021",
			        "date": "2017-07-01",
			        "duration": 4.08
			    }, {
			        "date": "2017-07-02",
			        "duration": 4.82
			    }, {
			        "date": "2017-07-03",
			        "duration": 5.62
			    }, {
			        "date": "2017-07-04",
			        "duration": 3.79
			    }, {
			        "lineColor": "#fbd51a",
			        "date": "2017-07-05",
			        "duration": 5.01
			    }, {
			        "date": "2017-07-06",
			        "duration": 4.43
			    }, {
			        "date": "2017-07-07",
			        "duration": 4.05
			    }, {
			        "date": "2017-07-08",
			        "duration": 3.09,
			        "lineColor": "#2498d2"
			    }, {
			        "date": "2017-07-09",
			        "duration": 2.87
			    }, {
			        "date": "2017-07-10",
			        "duration": 4.85
			    }, {
			        "date": "2017-07-11",
			        "duration": 8.90
			    }, {
			        "date": "2017-07-12",
			        "duration": 8.10
			    }],
			    "balloon": {
			        "cornerRadius": 6,
			        "horizontalPadding": 15,
			        "verticalPadding": 10
			    },
			    /*"valueAxes": [{
			        "duration": "mm",
			        "durationUnits": {
			            "hh": "h ",
			            "mm": "min"
			        },
			        "axisAlpha": 0
			    }],*/
			    "graphs": [{
			        "bullet": "square",
			        "bulletBorderAlpha": 1,
			        "bulletBorderThickness": 1,
			        "fillAlphas": 0.3,
			        "fillColorsField": "lineColor",
			        "legendValueText": "[[value]]",
			        "lineColorField": "lineColor",
			        "title": "duration",
			        "valueField": "duration"
			    }],
			    /*"chartScrollbar": {

			    },*/
			    "chartCursor": {
			        "categoryBalloonDateFormat": "YYYY MMM DD",
			        "cursorAlpha": 0,
			        "fullWidth": true
			    },
			    "dataDateFormat": "YYYY-MM-DD",
			    "categoryField": "date",
			    "categoryAxis": {
			        "dateFormats": [{
			            "period": "DD",
			            "format": "DD"
			        }, {
			            "period": "WW",
			            "format": "MMM DD"
			        }, {
			            "period": "MM",
			            "format": "MMM"
			        }, {
			            "period": "YYYY",
			            "format": "YYYY"
			        }],
			        "parseDates": true,
			        "autoGridCount": false,
			        "axisColor": "#555555",
			        "gridAlpha": 0,
			        "gridCount": 50
			    }
			});


			</script>
</head>
<body>
<div style="height: 520px;width: 330px;padding: 5px 5px 5px 5px;">
	<div style="float: left;color: blue;">金洲涌
				<span style="width: 30px;height: 30px;border-radius: 10px;color: white;
					background-color: coral;">
					&nbsp;V&nbsp;
				</span>
	</div>
	<br />
	<div>
		<span style="float: left;color: gray;">重要区级河道</span>
				<span style="text-align: center; float: right;width: 75px;height: 25px;border-radius: 10px;color: white;
					background-color: blue;">&nbsp;&nbsp;金洲涌&nbsp;&nbsp;</span>
	</div>
	<br /><br />
	<div>
		<table style="border-collapse: collapse;">
			<tr>
				<td style="width: 60px;text-align: center;color: #53D4FF;">I</td>
				<td style="width: 60px;text-align: center;color: #12A8F3;">II</td>
				<td style="width: 60px;text-align: center;color: #60D425;">III</td>
				<td style="width: 60px;text-align: center;color: #26B562;">IV</td>
				<td style="width: 60px;text-align: center;color: #FDC30C;">V</td>
				<td style="width: 60px;text-align: center;color: #FE5200;">劣V</td>
			</tr>
			<tr>
				<td style="height: 4px;background-color: #53D4FF;"></td>
				<td style="height: 4px;background-color: #12A8F3;"></td>
				<td style="height: 4px;background-color: #60D425;"></td>
				<td style="height: 4px;background-color: #26B562;"></td>
				<td style="height: 4px;background-color: #FDC30C;"></td>
				<td style="height: 4px;background-color: #FE5200;"></td>
			</tr>
		</table>
	</div>
	<br />
	<span style="text-align: center;margin-left: 115px;">金洲涌监测点</span>
	<br /><br />
	<div>
		<div style="margin-left: 10px;display: inline-block; ">
			<span style="color: gray;font-size: 12px;">DO<br/>溶氧量</span>
		</div>
		<div style="display: inline-block;margin-left: 20px;
					 font-weight: 900;font-size: 28px;color: #75DB41;">
			5.420
		</div>
		<div style="margin-left: 20px;display: inline-block; ">
			<span style="color: gray;font-size: 12px;">COD<br/>溶氧量</span>
		</div>
		<div style="display: inline-block;margin-left: 20px;
					 font-weight: 900;font-size: 28px;color: #B2ECFD;">
			14.000
		</div>
		<br />
		<div style="margin-left: 10px;display: inline-block; ">
			<span style="color: gray;font-size: 12px;">NH3-H<br/>溶氧量</span>
		</div>
		<div style="display: inline-block;margin-left: 20px;
					 font-weight: 900;font-size: 28px;color: #FDD34C;">
			1.600
		</div>
		<div style="margin-left: 20px;display: inline-block; ">
			<span style="color: gray;font-size: 12px;">TP<br/>溶氧量</span>
		</div>
		<div style="display: inline-block;margin-left: 20px;
					 font-weight: 900;font-size: 28px;color: #43BE79;">
			0.254
		</div>
	</div>
	<br />
	<div style="height: 10px;width: 100%;background-color: #E7E7E7;"></div>
	<br />
	<div style="text-align: center; margin-left: 10px; border: solid 1px #01AAEB;border-radius: 5px;width: 310px;height: 25px;">
		<div style="border-right: solid 1px #01AAEB;display: inline-block; width: 24%;height: 25PX;color: white;background-color: #01AAEB;">DO</div>
		<div style="border-right: solid 1px #01AAEB;display: inline-block;width: 23.5%;height: 25PX;">COD</div>
		<div style="border-right: solid 1px #01AAEB;display: inline-block;width: 23.5%;height: 25PX;">NH3-N</div>
		<div style="display: inline-block;width: 23%;height: 25PX;">TP</div>
	</div>
	<div id="chartdiv" style="margin-left: -15px;"></div>
	<div style="margin-left: 10px; color: GRAY;font-size: 12PX;">数据来源:广州市环保局</div>
</div>
</body>
</html>
